<template>
    <div class="download f-cb">
        <div class="PcLogo bock">
            <img :src="download.downloadLogoPC" alt="">
        </div>
        <img :src="download.downloadBackPC" alt="" class="picture fr">
        <div class="down_box f-cb">
            <ul class="list fl">
                <li :class="isapp==1?'hover':''" @click="changeApp(1)">
                    <span class="ios">App Store</span>
                </li>
                <li :class="isapp==2?'hover':''" @click="changeApp(2)">
                    <span class="android">Android</span>
                </li>
            </ul>
            <div class="QRcode" id="ios" v-show="isapp==1" ref="ios"></div>
            <div class="QRcode" id="android" v-show="isapp==2" ref="android"></div>
        </div>
    </div>
</template>

<script>
    import QRCode from 'qrcodejs2';
    export default {
        data(){
            return{
                isapp:1,
                download:{},
            };
        },
        computed:{},
        mounted(){
            $('#app').addClass('download_bg');
            window.document.title = this.$t('m.DownloadClient')
            this.getDownload();
        },
        methods:{
            changeApp(type){
                this.isapp = type
            },
            getDownload(){
                var _this = this;
                _this.$axios.get('/common/download')
                .then(res => {
                    if(res.data.code == 1){
                       this.download = res.data.data.download;
                       console.log(this.download)
                        setTimeout(function(){
                            new QRCode(_this.$refs.ios, {
                                text:res.data.data.download.downloadIos,
                                width: 140,
                                height: 140,
                                colorDark: "#333333", //二维码颜色
                                colorLight: "#ffffff", //二维码背景色
                                correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
                            })
                            new QRCode(_this.$refs.android, {
                                text:res.data.data.download.downloadAndroid,
                                width: 140,
                                height: 140,
                                colorDark: "#333333", //二维码颜色
                                colorLight: "#ffffff", //二维码背景色
                                correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
                            })
                        },200)
                        
                    }else if(res.data.code == 401){
                         _this.$router.replace({path:'/'})
                    }else if(res.data.code == 102 || res.data.code == 103){
                        _this.$router.replace({path:'/examine'})
                    }else if(res.data.code == 104){
                        _this.$router.go(0)
                    }else{
                        _this.$message({
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                })
                .catch(function(error) {
                    console.log(error)
                })
            },
            
        },
    }
</script>

<style lang="less">
    .download_bg{
       background: url(~@/assets/down01.jpg) no-repeat center !important;
       background-size: cover !important;
       .PcLogo{
           display: none;
       }
       .PcLogo.bock{
           display: block;
           margin:85px 0 50px !important;
       }
    }
    .download{
        padding: 0px 0 45px;
        width: 1000px;
        margin:0 auto;
        .picture{
            max-width: 450px;
        }
        .down_box{
            float: left;
            padding-top: 310px;
            .list{
                width: 210px;
                margin-right: 76px;
                li{
                    width: 100%;
                    height: 60px;
                    line-height: 60px;
                    background: #171928;
                    color: @fff;
                    font-weight: bold;
                    border-radius:3px;
                    margin-bottom: 20px;
                    padding-left: 15px;
                    cursor: pointer;
                }
                span{
                    padding-left: 64px;
                    display: block;
                    background-size:45px auto !important;
                }
                span.ios{
                    background: url(~@/assets/down03.png) no-repeat left center;
                }
                span.android{
                    background: url(~@/assets/down04.png) no-repeat left center;
                }
                li.hover{
                    background: #448ef6;
                }
            }
            .QRcode{
                float: left;
                width: 140px;
            }
        }
    }
</style>